<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.app {
			/* 	background-image: url(img/11.webp); */
				width: 500px;
				height: 300px;
				margin: auto;
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				animation-name: example;
				position: relative;
				animation-name: example;
				animation-duration: 6s;
				animation-iteration-count: 2;
			}
			@keyframes example{
				0%{background-color: black;left: 0px;top:0px;}
				25%{background-color: white;left: 300px;top:0px;}
				50%{background-color: black;left: 0px;top:200px;}
				75%{background-color: red;left: 300px;top:0px;}
				100%{background-color: skyblue ;left;top:400px;}
			}
		</style>
	</head>
	<body>
		<div class="app">
				<table>
					<tr>
						<td>
							账号：<input  type="text" >
						</td>
					</tr>
					<tr>
						<td>
							密码：<input  type="password" id="pwd"> <button id="seeing">查看密码</button>
						</td>
					</tr>
					<tr >
						<td colspan="2" >
							<button>登录</button>
							<button>注销</button>
						</td>
					</tr>
				</table>
			<script>
			var seeing=document.getElementById("seeing");
			   var pwd=document.getElementById("pwd");
			   var flag=0;
			   seeing.onclick=function(){
			    if(flag==0){
			     pwd.type="text";
			     flag=1;
			    }else{
			     pwd.type="password";
			     flag=0;
			    }
			   }
			</script>
		</div>
	</body>
</html>
